<template>
  <div>
    <el-row>
      <el-col :span="12" style="border-right: 12px solid #f0f2f5">
        <h3 id="orderContentH3">保险种类分析</h3>
        <div id="echart4"></div
      ></el-col>
      <el-col :span="12" style="">
        <h3 id="orderContentH3">购险占比</h3>
        <div id="echart5"></div
      ></el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  //   watch: {
  //     echart2(a, b) {
  //       this.echart2 = a;
  //       this.carried(a);
  //     },
  //     deep: true,
  //   },
  //   props: ["echart2"],
  data() {
    return {
      echartData1: [],
    };
  },
  mounted() {
    // if (this.echart2.length == 0) {
    //   return;
    // }
    this.carried();
    this.carried2();
  },
  methods: {
    carried(arr) {
      var echart2 = echarts.init(document.querySelector("#echart4"));
      echart2.clear(); //先清除图表
      echart2.setOption(this.list1(), true); //再设置配置
      echart2.hideLoading(); //关闭loading
    },
    carried2(arr) {
      var echart3 = echarts.init(document.querySelector("#echart5"));
      echart3.clear(); //先清除图表
      echart3.setOption(this.list1(), true); //再设置配置
      echart3.hideLoading(); //关闭loading
    },
    list1(arr) {
      return {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "right",
          top: "180px",
          left: "580px",
          data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 335, name: "直接访问" },
              { value: 310, name: "邮件营销" },
              { value: 234, name: "联盟广告" },
              { value: 135, name: "视频广告" },
              { value: 1548, name: "搜索引擎" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
    },
  },
};
</script>
<style scoped>
#echart4 {
  width: 700px;
  height: 350px;
}
#echart5 {
  width: 700px;
  height: 350px;
}
#orderContentH3 {
  width: 95%;
  margin: 0 auto;
  padding-top: 20px;
}
.orderContent3Div {
  display: inline-block;
  width: 45%;
  height: 350px;
  border-right: 10px solid #f0f2f5;
}
</style>